/* ========================================================================= 📱 MOBILE MENU MODULE — FOLDER: navigation/menu mobile/ Namespace: PREFIX `.mm-` (singkatan Mobile Menu) ============================================================== ⚠️ ATURAN SAFETY (JANGAN DIUBAH): ✅ TIDAK PAKAI selector existing `.mobile-bottom-nav` / `.mobile-nav` → 0% bentrok! ✅ Module TIDAK AKTIF OTOMATIS. Harus panggil manual window.MobileMenuModule.render() ✅ Specificity selalu diawali `.mm-` (tidak override styling existing) ✅ _GLOBAL-LOCK.css PALING TERAKHIR di = safety net kunci global tetap KING! ============================================================== 2 Komponen module: 1) .mm-bottom-bar = Bottom Navigation 4 tombol (Menu | Demos | Hot | Tools) 2) .mm-drawer = Sidebar Drawer Mobile (bukan sidebar desktop!) 3) .mm-spacer = Spacer 74px agar content tidak tertutup bottom bar ========================================================================= */ /* ===================== ROOT VARIABLES MODULE (hanya untuk module) ===================== */ :root { --mm-height: 72px; /* tinggi bottom nav */ --mm-bg: rgba(9,7,29,0.96); /* background bottom nav */ --mm-border-top: 1px solid rgba(148,163,184,0.08); --mm-icon-size: 22px; --mm-font-size: 0.64rem; --mm-font-weight: 600; --mm-radius-btn: 10px; --mm-active-bg: rgba(124,92,255,0.14); /* active ungu SPINDEX */ --mm-active-color: #ffffff; --mm-color: var(--color-text-secondary, #9ca3af); --mm-active-icon: #ec4899; /* pink SPINDEX */ --mm-z: 999; /* bottom nav z index */ --mm-drawer-z: 199; /* drawer z-index (di atas overlay) */ --mm-drawer-width: 290px; /* ⚠️ DIPERLEBAR untuk muat IKON BESAR 52px + label tebal */ /* Drawer items vars: */ --mm-item-radius: 14px; --mm-icon-box-size: 52px; /* kotak ikon rounded BESAR di gambar referensi */ --mm-icon-box-icon: 26px; --mm-item-font: 1.35rem; /* label BESAR BOLD putih */ --mm-grad-border: linear-gradient(135deg, #ec4899 0%, #8b5cf6 55%, #6366f1 100%); /* pink→ungu gradient border */ --mm-grad-border-soft: linear-gradient(135deg, rgba(236,72,153,0.65) 0%, rgba(139,92,246,0.7) 100%); } /* ===================== (1) SPACER CONTENT ===================== */ .mm-spacer { display: none; /* DEFAULT HIDDEN (jika modul tidak diaktifkan, tidak makan ruang) */ height: calc(var(--mm-height) + env(safe-area-inset-bottom, 0px)); width: 100%; flex-shrink: 0; } /* ===================== (2) BOTTOM NAVIGATION BAR ===================== */ .mm-bottom-bar { display: none; /* DEFAULT HIDDEN — modul tidak aktif = tidak muncul */ position: fixed; z-index: var(--mm-z); bottom: 0; left: 0; right: 0; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px calc(env(safe-area-inset-bottom) + 4px) 10px; background: var(--mm-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: var(--mm-border-top); transform: translateZ(0); will-change: transform; } /* === BUTTON STYLE MODULE (prefix mm-btn) === */ .mm-btn { display: flex; flex: 1 1 0%; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0.35rem 0.25rem; border-radius: var(--mm-radius-btn); color: var(--mm-color); font-size: var(--mm-font-size); font-weight: var(--mm-font-weight); text-align: center; background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; font-family: inherit; line-height: 1.35; text-decoration: none; transition: all 200ms ease; } .mm-btn:hover { background: rgba(255,255,255,0.04); color: #ffffff; text-decoration: none; } .mm-btn.mm-active { color: var(--mm-active-color); background: var(--mm-active-bg); } .mm-btn svg { width: var(--mm-icon-size); height: var(--mm-icon-size); margin: 0 auto; flex-shrink: 0; } .mm-btn.mm-active svg { color: var(--mm-active-icon); } /* Spesifik Icon Menu (toggle drawer) */ .mm-btn[data-action="toggle-drawer"] { -webkit-tap-highlight-color: transparent; } /* ===================== (3) DRAWER SIDEBAR MOBILE MODULE ===================== */ .mm-drawer-overlay { display: none; position: fixed; inset: 0; z-index: calc(var(--mm-drawer-z) - 1); background: rgba(5,3,20,0.6); backdrop-filter: blur(4px); animation: mm-fadein 200ms ease-out; } .mm-drawer { display: none; position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--mm-drawer-z); width: var(--mm-drawer-width); max-width: 82vw; height: 100vh; background: var(--color-surface-1, #0c0a20); border-right: 1px solid rgba(255,255,255,0.06); transform: translateX(-105%); transition: transform 300ms cubic-bezier(.2,.9,.3,1); padding-bottom: calc(var(--mm-height) + 20px); overflow-y: auto; overflow-x: hidden; } .mm-drawer.mm-open { transform: translateX(0); } .mm-drawer.mm-open + .mm-drawer-overlay { display: block; } /* ========================================================== ✅ FLEX COLUMN SOLUTION — HEADER DRAWER TETAP DI ATAS 100% WORK! ========================================================== GAGAL pakai position:sticky (karena overflow-y auto di parent dan browser mobile implementasi terbatas). GANTI struktur: • aside.mm-drawer = display:flex; flex-direction:column; (TIDAK ADA overflow!) • .mm-drawer-header= flex-shrink:0 (TIDAK mengecil, TETAP DI ATAS SELALU!) • .mm-drawer-body = flex:1 (sisa tinggi) + overflow-y: auto (HANYA AREA INI YANG SCROLL!) Hasil: Header logo + Close X TIDAK PERNAH ikut tergulung, user bisa close kapanpun! */ aside.mm-drawer, body.mm-active aside.mm-drawer { display: flex !important; flex-direction: column !important; align-items: stretch !important; overflow: hidden !important; /* OVERFLOW di REMOVE dari drawer. Pindah ke body wrapper! */ padding-bottom: 0 !important; padding: 0 !important; } .mm-drawer-header { /* flex column child: TETAP DI ATAS, TIDAK BOLEH di scroll! */ position: relative !important; flex-shrink: 0 !important; flex-grow: 0 !important; top: auto !important; left: auto !important; right: auto !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 20px 14px 20px !important; margin: 0 0 0 0 !important; background-color: #0c0a20 !important; background-image: linear-gradient(180deg, #0e0b24 0%, #0c0a20 100%) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; backdrop-filter: saturate(150%) blur(10px) !important; -webkit-backdrop-filter: saturate(150%) blur(10px) !important; min-height: 62px !important; height: 62px !important; max-height: 62px !important; box-sizing: border-box !important; } /* ===== DRAWER BODY (AREA SCROLL HANYA DISINI!) — nav list dibungkus ini ===== */ .mm-drawer-body { flex: 1 1 auto !important; min-height: 0 !important; /* required agar flex child scrollable! */ max-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; box-sizing: border-box !important; padding: 14px 10px 10px 10px !important; /* ✅ PADDING BOTTOM SEKARANG 10px SAJA! (sebelumnya 72+8 = 80px! BUNUH total ruang lega!) */ } .mm-drawer-logo { font-family: var(--font-display, system-ui, sans-serif); font-weight: 900 !important; background: linear-gradient(90deg, #ec4899 0%, #a855f7 50%, #6366f1 100%); -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; font-size: 1.55rem !important; letter-spacing: -0.02em; line-height: 1; } .mm-drawer-close { all: unset !important; cursor: pointer !important; width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 12px !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #ffffff !important; transition: transform 140ms ease, background-color 140ms ease !important; box-sizing: border-box !important; -webkit-tap-highlight-color: transparent; } .mm-drawer-close:hover { background: rgba(139,92,246,0.16); transform: rotate(90deg); } .mm-drawer-close:active { transform: scale(0.92); } .mm-drawer-close svg { width: 22px !important; height: 22px !important; display: block !important; color: #fff; } /* Nav list berada di dalam .mm-drawer-body */ .mm-drawer-nav { padding-top: 4px !important; margin: 0 !important; } .mm-section-item { margin: 18px 6px 10px 10px !important; } /* ========================================================== 🚫 DOUBLE SCROLLBAR BUG FIX — SAAT DRAWER OPEN: HALAMAN UTAMA DI BEKU! ========================================================== Sebelumnya: drawer terbuka -> scrollbar drawer body MUNCUL (1) + scrollbar html/body halaman utama MASIH ADA (2) -> TERJADI DOUBLE scroll bar di kanan! Solusi: class html.mm-drawer-open = overflow:hidden TOTAL di root element HTML (bukan cuma body! Karena overflow:hidden di body TIDAK hilangkan scrollbar root). Scrollbar HANYA TINGGAL 1: area .mm-drawer-body untuk items nav! + padding-right: var(--scrollbar-w) — via CSS variable dari JS! Tidak bisa di-overwrite. */ html.mm-drawer-open, html.mm-drawer-open body { overflow: hidden !important; height: 100% !important; position: relative !important; touch-action: none !important; /* mobile: disable swipe scroll di luar drawer */ overscroll-behavior: none !important; /* mencegah scroll chain ios/android */ /* 📏 PREVENT LAYOUT SHIFT: Ruang kosong yang tadinya scrollbar → diisi padding-right otomatis! JS set document.documentElement.style.setProperty('--scrollbar-w', '10px'). CSS !important di sini JAMINAN TIDAK BERUBAH meskipun inline style di reset! */ padding-right: var(--scrollbar-w, 0px) !important; } /* App-header (fixed) juga TIDAK BOLEH bergeser. */ html.mm-drawer-open .app-header { /* Kanan app-header harus mundur sejauh scrollbar width (karena body dipadding kanan) */ right: var(--scrollbar-w, 0px) !important; width: auto !important; } /* ⚠️ FORCE SPECIFICITY DRAWER MODULE — TIDAK BOLEH DI-OVERRIDE SIDEBAR EXISTING! */ body.mm-active aside.mm-drawer, aside.mm-drawer { position: fixed !important; left: 0 !important; top: 0 !important; width: 290px !important; max-width: 290px !important; min-width: 290px !important; height: 100vh !important; background: #0c0a20 !important; /* 🚨 FLEX COLUMN LAYOUT = HEADER STICKY + HANYA BODY YANG SCROLL! Parent DRAWER SAMA SEKALI TIDAK BOLEH ADA OVERFLOW-Y AUTO! Akan menyebabkan DOUBLE scrollbar (parent + child .mm-drawer-body) = "double luar dalam" user! */ display: flex !important; flex-direction: column !important; overflow: hidden !important; /* ❗ PENTING! Parent = overflow HIDDEN total. */ padding: 0 !important; /* flex child atur padding sendiri-sendiri */ margin: 0 !important; transform: translateX(-105%) !important; transition: transform 300ms cubic-bezier(.2,.9,.3,1) !important; z-index: 9999 !important; border-right: 1px solid rgba(255,255,255,0.06) !important; box-shadow: 20px 0 60px -20px rgba(139, 92, 246, 0.45); } /* ========================================================== 🔒 FINAL HIDE NATIVE SCROLLBAR VISUAL (mencegah sisa-sisa double garis) ========================================================== Tetap bisa di-scroll via mousewheel / jari mobile. Hanya garis indikator visual WebKit/Firefox yang dihilangkan! 100% work untuk user mobile (touch interface = tidak butuh indikator scrollbar). */ aside.mm-drawer::-webkit-scrollbar, .mm-drawer-body::-webkit-scrollbar, html.mm-drawer-open::-webkit-scrollbar, html.mm-drawer-open body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } aside.mm-drawer, .mm-drawer-body, html.mm-drawer-open, html.mm-drawer-open body { -ms-overflow-style: none !important; /* IE 10+ / Edge Legacy */ scrollbar-width: none !important; /* Firefox 64+ */ } /* ✅ SAAT DRAWER TERBUKA (class mm-open) POSISI X = 0 */ body.mm-active aside.mm-drawer.mm-open, aside.mm-drawer.mm-open { transform: translateX(0) !important; } /* ========================================================== 🔒 1. SAFETY SAAT MODUL AKTIF (mm-active): Sembunyikan SIDEBAR & BOTTOM NAV EXISTING! ========================================================== Alasan: agar user click bottom nav Menu TIDAK terbuka sidebar icononly LAMA (80px, cuma icon). GANTI 100% pakai modul baru (drawer 290px + label). */ body.mm-active .mobile-bottom-nav, body.mm-active .mobile-bottom-spacer { display: none !important; } body.mm-active #home-sidebar-wrap, body.mm-active .home-sidebar, body.mm-active aside.sidebar, body.mm-active .sidebar-desktop { display: none !important; } body.mm-active { --sidebar-width: 0px; --content-pad-left: 0px; } body.mm-active .mm-spacer { display:block !important; } /* ========================================================== 🔒 2. ⚡ SUPER EARLY HIDE (NO FLASH BUG) via @media query MANDIRI! ========================================================== 🚨 SOLUSI BUG RELOAD TERKADANG MUNCUL STICKY MENU LAMA! Penyebab sebelumnya: hide sidebar cuma via `body.mm-active > xxx` (butuh JS set CLASS dulu, butuh waktu) → Saat reload: browser render HTML existing sidebar TERPASANG 1 frame dulu SEBELUM JS set class mm-active → FLASH! Solusi: Pakai @media (max-width: 1023px) = HIDE SIDEBAR LAMA LANGSUNG DI LEVEL CSS! Tanpa butuh class apapun! CSS dari HEAD (link rel=stylesheet) apply SEBELUM DOM DI PAINT → TIDAK ADA FLASH 0MS! (Desktop >=1024px = pakai sidebar desktop sticky existing normal, modul mobile-menu disable) */ @media (max-width: 1023px) { .mobile-bottom-nav, .mobile-bottom-spacer { display: none !important; } #home-sidebar-wrap, .home-sidebar, aside.sidebar, .sidebar-desktop, #sidebar-toggle-btn, .sidebar-toggle { display: none !important; } html, body { --sidebar-width: 0px; --content-pad-left: 0px; } /* Spacer mobile bottom bar modul kita munculkan */ .mm-spacer { display: block !important; } } .mm-drawer-logo { font-family: var(--font-display, system-ui, sans-serif); font-weight: 900; font-size: 1.4rem; background: linear-gradient(90deg, #ec4899 0%, #8b5cf6 55%, #6366f1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.01em; margin: 0; } .mm-drawer-close { width: 38px !important; height: 38px !important; padding: 7px !important; border-radius: 10px !important; color: #cbd5e1; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.07) !important; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .mm-drawer-close:hover { background: rgba(236,72,153,0.14) !important; color: #ffffff !important; } .mm-drawer-close svg { width: 18px !important; height: 18px !important; } /* ========================================================== 🧭 DRAWER NAVIGATION LIST — MODEL SPINDEX (ICON BOX TETAP ADA!) ========================================================== */ .mm-drawer-nav { display: flex; flex-direction: column; gap: 2px; /* jarak antar item lebih rapat seperti spindex */ padding: 6px 10px 30px 8px; margin: 0; list-style: none; } /* ---- Section Label (DISCOVER / LIVE CASINO / ANALYTICS / TOOLS) ---- */ .mm-section-label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; /* lebih lega tapi tidak berlebihan */ color: #60657a; /* abu slate + ungu subtle sesuai spindex */ text-transform: uppercase; margin: 22px 10px 10px 16px; padding: 0; user-select: none; opacity: 0.85; } .mm-section-label:first-of-type { margin-top: 10px; } /* section pertama lebih dekat header */ /* ---- Individual Nav Item (flex row: icon box TETAP + label) ---- */ .mm-nav-item { all: unset; /* reset tag button / a */ display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 15px !important; padding: 12px 14px 12px 12px !important; border-radius: 12px !important; /* Spindex: rounded kecil tidak terlalu lebar */ color: #ffffff !important; font-family: var(--font-display, system-ui, sans-serif) !important; font-size: 1.18rem !important; /* font lebih kecil sesuai spindex */ font-weight: 700 !important; /* weight medium tidak terlalu tebal */ letter-spacing: -0.005em !important; line-height: 1.1 !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; transition: background-color 160ms ease, transform 160ms ease !important; /* ❌ HAPUS BORDER GRADIENT LUAR CARD ITEM (sesuai spindex clean) */ border: 1px solid transparent !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; position: relative !important; text-decoration: none !important; min-height: 54px !important; } /* 👇 LABEL: WAJIB MUNCUL — TIDAK BOLEH DIHIDE SAMA SEKALI PUN rule existing 👇 */ .mm-nav-item .mm-nav-label, .mm-nav-label { display: block !important; visibility: visible !important; opacity: 1 !important; color: #e9ebff !important; /* putih agak biru sesuai spindex */ flex: 1 1 auto !important; flex-shrink: 0 !important; min-width: 0; text-align: left !important; font-size: inherit !important; font-weight: inherit !important; margin: 0 !important; padding: 0 !important; width: auto !important; } /* 👇 ✅ ICON BOX TETAP ADA! KOTAK GRADIENT DIPERTAHANKAN sesuai user minta "icon box tetap"! Dikecilkan 52 → 44px agar proporsi sama seperti spindex. */ .mm-nav-item .mm-icon-box, .mm-icon-box { flex-shrink: 0 !important; /* ICON TIDAK BOLEH DIPERKEKILKAN! */ flex-grow: 0 !important; width: 44px !important; /* ✅ Dikurangi dari 52px → 44px sesuai spindex */ height: 44px !important; /* ✅ Kotak kecil proporsional */ display: flex !important; } .mm-nav-item:hover { background: rgba(124, 92, 255, 0.08); transform: translateX(1px); } /* ✅ Active item SPINDEX: cuma bg subtle rounded, TANPA border gradient luar, TANPA indicator kiri! */ .mm-nav-item.mm-active { background: rgba(80, 70, 140, 0.32); /* bg ungu-dark subtle tanpa gradien border */ border-color: transparent; box-shadow: none; /* hapus glow luar */ } /* ❌ HAPUS indicator pink bar di sebelah kiri (model spindex tidak punya) */ .mm-nav-item.mm-active::before { display: none !important; } /* Label active item lebih putih cerah */ .mm-nav-item.mm-active .mm-nav-label { color: #ffffff !important; } /* ===== ✅ ITEM SOON (Guides) = disable click, styling abu opacity 60% ===== */ .mm-nav-item.mm-soon { opacity: 0.6 !important; cursor: not-allowed !important; pointer-events: auto !important; /* allow click handler agar bisa block navigate manual */ filter: grayscale(20%); } .mm-nav-item.mm-soon:hover { background: transparent !important; transform: none !important; } /* BADGE SOON: rounded ungu-biru text putih di kanan label */ .mm-soon-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; padding: 4px 12px !important; border-radius: 8px !important; background: linear-gradient(90deg, #5b4bd8 0%, #6d63e6 50%, #7e69ff 100%) !important; color: #ffffff !important; font-family: var(--font-display, system-ui, sans-serif) !important; font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; line-height: 1.1 !important; box-shadow: 0 4px 14px -6px rgba(109, 99, 230, 0.65) !important; border: 1px solid rgba(255,255,255,0.08) !important; margin: 0 !important; } /* ---- ✅ ICON BOX: Kotak rounded DENGAN BORDER GRADIENT pink→ungu (TETAP ADA SESUAI USER!) ---- */ /* TECHNIQUE: "fake border gradient" pakai 2 layer (outer sebagai gradient, inner sebagai bg box) */ .mm-icon-box { flex-shrink: 0; width: 44px; /* disesuaikan kecil */ height: 44px; /* disesuaikan kecil */ border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; /* LAYER OUTER BACKGROUND = GRADIENT (yang akan jadi "border" 2px) — TETAP ADA! */ background: var(--mm-grad-border); padding: 2px; /* ketebalan border gradient = 2px */ box-shadow: 0 6px 18px -10px rgba(139,92,246,0.55); } /* INNER LAYER = background box gelap (menutupi gradient kecuali pinggir 2px) */ .mm-icon-box::after { content: ""; position: absolute; inset: 2px; /* Sama dengan padding luar = 2px */ border-radius: calc(var(--mm-item-radius, 14px) - 2px); background: #0e0b23; /* warna dalam kotak ikon, sesama surface drawer tapi lebih gelap */ z-index: 0; } .mm-icon-box svg { position: relative; z-index: 1; /* muncul di atas inner layer */ width: var(--mm-icon-box-icon, 26px); height: var(--mm-icon-box-icon, 26px); /* Warna icon = GRADIENT PINK → UNGU */ color: #ec4899; stroke: url(#mm-grad-icon) !important; } /* Active item: warna icon lebih cahaya + box sedikit lebih bright */ .mm-nav-item.mm-active .mm-icon-box { filter: brightness(1.06) saturate(1.15); transform: scale(1.02); box-shadow: 0 8px 26px -8px rgba(236,72,153,0.65); } /* Fallback stroke warna gradien kalau SVG stroke tidak support url gradient, inject via CSS inline fallback */ .mm-icon-box svg * { stroke: #c084fc !important; } .mm-icon-box svg line, .mm-icon-box svg polyline, .mm-icon-box svg path, .mm-icon-box svg circle, .mm-icon-box svg rect { stroke-width: 2 !important; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================== ✨ MODERN DRAWER FOOTER (palem bawah setelah section nav items) ============================================================== */ .mm-drawer-footer { display: flex; flex-direction: column; gap: 10px; /* ✅ GAP 12 → 10px lagi dikurangi */ padding: 14px 12px 8px 12px; /* ✅ PADDING top 16→14, bottom 14→8 (bottom paling pendek) */ margin: 6px 10px 0px 8px; /* ✅ MARGIN top 10→6, BOTTOM 6 → 0 (MEPET! Tidak ada ruang bawah footer lagi!) */ border-radius: 14px; background: linear-gradient(180deg, rgba(30,26,65,0.32) 0%, rgba(14,11,35,0.0) 100%); position: relative; } /* --- [1] Divider Accent Gradient Pink-Ungu 1px tinggi --- */ .mm-footer-divider { width: 100%; height: 1px; min-height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(236, 72, 153, 0.55) 20%, rgba(139, 92, 246, 0.75) 50%, rgba(99, 102, 241, 0.55) 80%, transparent 100% ); opacity: 0.9; border: none; } /* --- [2] Socials 3 Icon BULAT (border gradient style seperti icon-box) --- */ .mm-footer-socials { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; /* ✅ GAP SOCIAL DIKURANGI dari 14 → 10px */ flex-wrap: wrap; padding: 0 !important; /* ✅ PADDING socials DIHAPUS 2px → 0 */ } .mm-social-icon { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 36px; /* ✅ UKURAN ICON DIKURANGI dari 40 → 36px */ height: 36px; /* ✅ UKURAN ICON DIKURANGI */ border-radius: 50%; position: relative; background: var(--mm-grad-border); padding: 2px; flex-shrink: 0; transition: transform 200ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms ease, filter 200ms ease; box-shadow: 0 6px 18px -10px rgba(139,92,246,0.55); -webkit-tap-highlight-color: transparent !important; text-decoration: none; } /* INNER LAYER: surface gelap bulat (menutupi gradient kecuali pinggir 2px) */ .mm-social-icon::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #0e0b23; z-index: 0; } /* SVG icon di dalam (posisi relative agar z-index > layer inner gelap) */ .mm-social-icon-inner { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .mm-social-icon svg { width: 15px; height: 15px; color: #e9d5ff; /* ungu keemasan cerah */ fill: currentColor; display: block; } /* HOVER EFFECT: glow pink + sedikit membesar (nyata dan jelas) */ .mm-social-icon:hover { transform: scale(1.09) translateY(-1.5px); filter: brightness(1.1) saturate(1.2); box-shadow: 0 12px 30px -10px rgba(236, 72, 153, 0.75), 0 4px 14px -6px rgba(139, 92, 246, 0.6); } .mm-social-icon:hover svg { color: #ffffff; } /* --- [3] Info Bar: Copyright (kiri) + Version Badge (kanan) --- */ .mm-footer-info { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; /* ✅ GAP DIKURANGI: 10 → 6px */ padding: 0 !important; /* ✅ PADDING 0 2 → DIHAPUS */ flex-wrap: wrap; } /* Copyright text kecil subtle */ .mm-footer-copyright { font-size: 0.66rem; /* ✅ LEBIH KECIL: 0.7rem → 0.66rem (≈11px) */ font-family: var(--font-display, system-ui, sans-serif); font-weight: 500; line-height: 1.3; letter-spacing: 0.005em; color: #7b7f9a; /* abu slate subtle, tidak mencuri perhatian */ opacity: 0.95; flex: 1 1 auto; min-width: 0; text-align: left; user-select: text; } /* Version Badge mini rounded ungu glow di kanan */ .mm-footer-version { display: inline-flex; align-items: center; justify-content: center; padding: 2.5px 8px !important; /* ✅ LEBIH KECIL PADDING: 3 9 → 2.5 8 */ border-radius: 999px; /* pill shape */ background: linear-gradient(90deg, rgba(236,72,153,0.18) 0%, rgba(124,58,237,0.22) 100%); border: 1px solid rgba(139,92,246,0.28); color: #c4b5fd; font-family: var(--font-display, system-ui, sans-serif); font-size: 0.62rem; /* ✅ LEBIH KECIL 0.66 → 0.62rem */ font-weight: 700; letter-spacing: 0.04em; line-height: 1.05; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); } /* ===================== ANIMASI ===================== */ @keyframes mm-fadein { from { opacity: 0; } to { opacity: 1; } } /* ===================== RESPONSIF VISIBILITY MODULE ===================== Rule ini KEHIDUPAN MODULE — kapan bottom bar muncul? SAMA PERSIS dengan aturan global yang sudah dikunci user (0-1023 show, ≥1024 hide) tapi hanya BERLAKU JIKA module DI-ENABLE dengan class */ /* === TABLET BESAR & MOBILE: Module aktif = SHOW === */ body.mm-active .mm-bottom-bar { display: grid !important; } body.mm-active .mm-spacer { display: block !important; } /* === DESKTOP ≥1024px: Module aktif pun TIDAK SHOW (pakai sidebar desktop) — SPECIFICITY TERTINGGI LAYER PROTEKSI EKSTRA! === */ @media (min-width: 1024px) { html body.mm-active .mm-bottom-bar, html body .mm-bottom-bar, html body nav.mm-bottom-bar { display: none !important; } html body.mm-active .mm-spacer, html body .mm-spacer, html body .mobile-bottom-spacer { display: none !important; } html body.mm-active .mm-drawer, html body .mm-drawer, html body .mobile-drawer { display: none !important; } html body.mm-active .mm-drawer-overlay, html body .mm-drawer-overlay, html body .drawer-open { display: none !important; } /* Sembunyikan LEGACY mobile-bottom-nav di desktop juga agar TIDAK DAPAT muncul 1 frame flash */ html body .mobile-bottom-nav, html body nav.mobile-bottom-nav, html body .legacy-mobile-bottom { display: none !important; } }